<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import AIContainer from '@/components/AIContainer.vue'
const router = useRouter()

// 存储用户输入的搜索关键词
const searchInput = ref(null)

// 搜索房源
const searchProperty = () => {
  router.push({
    path: '/list',
    query: {
      key: searchInput.value
    }
  })
}

// 获取对话框组件
const dislogRef = ref(null)

// 点击图标显示对话框
const handleClick = () => {
  dislogRef.value.openDialog()
}
</script>

<template>
  <div class="container">
    <div class="content">
      <h1>乐居汇看房网</h1>
      <div class="foot">
        <el-input
          size="large"
          class="search"
          placeholder="请输入内容"
          v-model="searchInput"
          @keyup.enter="searchProperty"
        ></el-input>
        <el-button
          class="searchBtn"
          type="primary"
          size="large"
          @click="searchProperty"
          >搜索</el-button
        >
      </div>

      <div class="aichat">
        <p>乐小智AI助手</p>

        <svg class="icon" aria-hidden="true" @click="handleClick">
          <use xlink:href="#icon-ChatGPT"></use>
        </svg>

        <AIContainer ref="dislogRef"></AIContainer>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  background-color: #ffffff;
  width: auto;
  height: 800px;

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 800px;
    background: url('@/assets/images/index-footer.webp') no-repeat center center;
    background-color: transparent;
    background-size: cover;

    h1 {
      font-size: 50px;
      font-weight: bold;
      margin-bottom: 80px;
    }

    .search {
      width: 500px;
      height: 45px;
      border-radius: 50px 20px;
    }

    .searchBrn {
      margin-left: 20px;
      width: 100px;
      height: 45px;
      font-size: 16px;
      font-weight: bold;
    }

    .aichat {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 50px;

      p {
        font-size: 30px;
        font-weight: bold;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        margin: 10px 0;
      }
    }
  }
}
</style>
